<<<<<<< HEAD
<template>
    <div id="employee">
        <div class="employee-top">
            角色名称：
            <el-input style="width: 240px;margin-left: 10px;margin-right: 20px;" placeholder="请输入角色名称" v-model="roleName"
                clearable>
            </el-input>
           
            <el-button type="primary" @click="getList()">查询</el-button>
            <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
            
            <el-button type="danger">删除</el-button>
            <el-button type="">导出</el-button>
        </div>
        <div class="employee-content">
            <el-table :data="tableData" border style="width: 100%;font-size: 13px;margin-left: 30px;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="150">
                </el-table-column>
                <el-table-column prop="pes" label="权限字符" width="150">
                </el-table-column>
              
                <el-table-column  prop="rid" label="操作" width="100" >
                    <template slot-scope="scope">
                        <el-button @click="delete(scope.row.Id)" type="text" size="small">删除</el-button>
                          <el-button @click="toUpdate(scope.row.rid)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog width="450px" top="100px" title="新增角色" :visible.sync="dialogFormVisible">
            <table>
                <tr>
                    <td>角色名称</td>
                    <td><el-input v-model="roles.roleName"></el-input></td>
                </tr>
                <br>
                <tr>
                    <td>权限字符</td>
                    <td><el-input v-model="roles.pes"></el-input></td>
                </tr>
            </table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-if="roles.rid" @click=" save()">确 定</el-button>
            </div>
        </el-dialog>
  <el-dialog width="450px" top="100px" title="新增角色" :visible.sync="dialogFormVisibled">
            <table>
                <tr>
                    <td>角色名称</td>
                    <td><el-input v-model="roles.roleName"></el-input></td>
                </tr>
                <br>
                <tr>
                    <td>权限字符</td>
                    <td><el-input v-model="roles.pes"></el-input></td>
                </tr>
            </table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-model="roles.rid" @click=" update()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { dataTool } from 'echarts';


export default {
    name: 'employee',
   
    data() {
        return {
            roleName:'',
            dialogFormVisible: false,
            dialogFormVisibled: false,
          roles:{
            roleName:'',
            pes:''
          },
            tableData: []
        }
    },
    methods: {
       getList(){
        this.axios({
            url:'/role/list',
            params:{
                roleName:this.roleName
            }
        }).then(res=>{
            console.log(res.data)
            this.tableData=res.data.list
        })
       },
       save(){
        this.dialogFormVisible = true
        this.axios({
            url:'/role/add',
            method:'post',
            data:{
            ...this.roles
            }
        }).then(rs=>{
            if(rs.data.isAdd===true){
                   alert("增加成功")
                   this.getList()
                   this.dialogFormVisible=false
            }else{
                alert("增加失败")
                this.dialogFormVisible=false;
            }
        })
       },
       toUpdate(id){
   
        this.dialogFormVisibled=true
        this.axios({
            url:'/role/list',
            params:{
                rid:id
            }
        }).then(rs=>{
            this.roles=rs.data.list[0]
        })
       },
       update(){
        this.axios({
            url:'/role/update',
            method:'post',
            data:{
                ...this.roles
            }
        }).then(rs=>{
          if(rs.data.isUpdate===true){
                   alert("修改成功")
                   this.getList()
                   this.dialogFormVisibled=false
            }else{
                alert("修改失败")
                this.dialogFormVisibled=false;
            }
        })
       
        }
    },created(){
        this.getList()
    }
}
</script>

<style scoped>
#employee {
    width: 100%;
    height: 100%;
}

.employee-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.employee-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 
  /deep/ .el-dialog {
    height: 600px;
  } */
=======
<template>
    <div id="employee">
        <div class="employee-top">
            角色名称：
            <el-input style="width: 240px;margin-left: 10px;margin-right: 20px;" placeholder="请输入角色名称" v-model="roleName"
                clearable>
            </el-input>
           
            <el-button type="primary" @click="getList()">查询</el-button>
            <el-button type="primary" @click="dialogFormVisible=true">新增</el-button>
            
            <el-button type="danger">删除</el-button>
            <el-button type="">导出</el-button>
        </div>
        <div class="employee-content">
            <el-table :data="tableData" border style="width: 100%;font-size: 13px;margin-left: 30px;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称" width="150">
                </el-table-column>
                <el-table-column prop="pes" label="权限字符" width="150">
                </el-table-column>
              
                <el-table-column  prop="rid" label="操作" width="100" >
                    <template slot-scope="scope">
                        <el-button @click="delete(scope.row.Id)" type="text" size="small">删除</el-button>
                          <el-button @click="toUpdate(scope.row.rid)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog width="450px" top="100px" title="新增角色" :visible.sync="dialogFormVisible">
            <table>
                <tr>
                    <td>角色名称</td>
                    <td><el-input v-model="roles.roleName"></el-input></td>
                </tr>
                <br>
                <tr>
                    <td>权限字符</td>
                    <td><el-input v-model="roles.pes"></el-input></td>
                </tr>
            </table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-if="roles.rid" @click=" save()">确 定</el-button>
            </div>
        </el-dialog>
  <el-dialog width="450px" top="100px" title="新增角色" :visible.sync="dialogFormVisibled">
            <table>
                <tr>
                    <td>角色名称</td>
                    <td><el-input v-model="roles.roleName"></el-input></td>
                </tr>
                <br>
                <tr>
                    <td>权限字符</td>
                    <td><el-input v-model="roles.pes"></el-input></td>
                </tr>
            </table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-model="roles.rid" @click=" update()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { dataTool } from 'echarts';


export default {
    name: 'employee',
   
    data() {
        return {
            roleName:'',
            dialogFormVisible: false,
            dialogFormVisibled: false,
          roles:{
            roleName:'',
            pes:''
          },
            tableData: []
        }
    },
    methods: {
       getList(){
        this.axios({
            url:'/role/list',
            params:{
                roleName:this.roleName
            }
        }).then(res=>{
            console.log(res.data)
            this.tableData=res.data.list
        })
       },
       save(){
        this.dialogFormVisible = true
        this.axios({
            url:'/role/add',
            method:'post',
            data:{
            ...this.roles
            }
        }).then(rs=>{
            if(rs.data.isAdd===true){
                   alert("增加成功")
                   this.getList()
                   this.dialogFormVisible=false
            }else{
                alert("增加失败")
                this.dialogFormVisible=false;
            }
        })
       },
       toUpdate(id){
   
        this.dialogFormVisibled=true
        this.axios({
            url:'/role/list',
            params:{
                rid:id
            }
        }).then(rs=>{
            this.roles=rs.data.list[0]
        })
       },
       update(){
        this.axios({
            url:'/role/update',
            method:'post',
            data:{
                ...this.roles
            }
        }).then(rs=>{
          if(rs.data.isUpdate===true){
                   alert("修改成功")
                   this.getList()
                   this.dialogFormVisibled=false
            }else{
                alert("修改失败")
                this.dialogFormVisibled=false;
            }
        })
       
        }
    },created(){
        this.getList()
    }
}
</script>

<style scoped>
#employee {
    width: 100%;
    height: 100%;
}

.employee-top {
    width: calc(100% -20px);
    height: 60px;
    /* background-color: pink; */
    line-height: 60px;
    padding-left: 20px;
    font-size: 13px;
}

.employee-content {
    width: 100%;
    height: calc(100% - 60px);
    /* background-color: skyblue; */
}

.el-input,
.el-button {
    font-size: 13px;
}

/* 
  /deep/ .el-dialog {
    height: 600px;
  } */
>>>>>>> 6be95d2b3200ab6fbb17d1e0a5a9b367f780cc8e
</style>